<template>
	<div>
		<div class="top">
			<ul>
				<li v-for="item in list " :key="item.id">
					<template v-if="item.type==1">
						<div class="contain" >
							<article>
								<img :src="tuimg(item.dataDetail.image)">
								<p>{{item.dataDetail.placeLabel}}</p>
							</article>
							<aside>
								<h3>{{item.dataDetail.title}}</h3>
								<h4>{{item.dataDetail.productType}} • {{item.dataDetail.productCat}} • {{item.dataDetail.days}}</h4>
								<p>
									<strong>￥{{item.dataDetail.priceLabel}}</strong>起
									<em>{{item.dataDetail.numLabel}}已报名</em>
								</p>
							</aside>
						</div>
					</template>
					<template v-if="item.type==4">
						<div class="contain1" >
							<article>
								<img :src="tuimg(item.dataDetail.image)">
								<p>{{item.dataDetail.placeLabel}}</p>
							</article>
						</div>
					</template>
					<template v-if="item.type==7">
						<div class="contain2" >
							<article>
								<img :src="tuimg(item.dataDetail.image)">
							</article>
							<aside>
								<h3>{{item.dataDetail.title}}</h3>
								<p>
									<em>{{item.dataDetail.numLabel}}</em>
									<span>去旅行></span>
								</p>
							</aside>
						</div>
					</template>
				</li>
			</ul>
		</div>
		<div class="bottom">
			<h3>已经到底啦</h3>
		</div>
	</div>
</template>

<script>
	export default{
		name:'TravelList',
		data(){
			return{
				list:[
				]
			}
		},
		props:['newlist'],
		watch:{
			newlist(){
				this.list=[]
				// for(var i in this.newlist){
				// 	this.list.push(this.newlist[i].dataDetail)
				// }
				this.list=this.newlist
				console.log(this.list);
				// for(var i in this.)
			}
		},
		methods:{
			tuimg(val){
				if(val){
					return 'http://images.weserv.nl/?url='+val
				}else{
					return val
				}
			}
		}
	}
</script>

<style scoped>
	ul{
		float: left;
		display: block;
		width: 100%;
	}
	ul li{
		width: 45%;
		float: left;
	}
	.contain{
		float: left;
		width: 90%;
		position: relative;
		border: 1px solid gainsboro;
		margin-top: 0.2rem;
		margin-left: 0.6rem;
		height: 6rem;
		border-radius: .3rem;
	}
	.contain2{
		float: left;
		width: 90%;
		position: relative;
		border: 1px solid gainsboro;
		margin-top: 0.2rem;
		margin-left: 0.6rem;
		height: 6rem;
		border-radius: .3rem;
	}
	.contain:nth-child(even){
		margin-top: 0.6rem;
	}
	.contain img{
		height: 3.5rem;
		width: 100%;
		border-radius: .3rem .3rem 0 0;
	}
	.contain article p{
		top: 0;
		border-radius: 0.3rem 0 0.3rem 0;
		left: .01rem;
		width: 1.2rem;
		text-align: center;
		line-height: .5rem;
		height: .5rem;
		background-color: rgba(0,0,0,0.3);
		position: absolute;
		color: white;
	}
	.contain aside h3{
		text-indent: 1em;
		margin-top: .3rem;
		font-weight: bold;
		font-size: .35rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.contain aside h4{
		text-indent: 1em;
		font-size: .3rem;
		margin-top: .1rem;
		color: #808080;
	}
	.contain aside p{
		color: #ff7100;
		margin-top: .3rem;
		text-indent: 1em;
	}
	.contain aside p strong{
		font-size: .4rem;
		text-indent: 1em;
		font-weight: bold;
		color: #ff7100;
	}
	.contain aside p em{
		color: #808080;
		margin-left: 20%;
	}
	.contain1{
		float: left;
		width: 90%;
		position: relative;
		border: 1px solid gainsboro;
		height: 6rem;
		margin-left: 0.6rem;
		border-radius: .3rem;
	}
	.contain1 img{
		height: 6rem;
		width: 100%;
		border-radius: .3rem;
	}
	.contain2 img{
		height: 3.5rem;
		width: 100%;
		border-radius: .3rem .3rem 0 0;
	}
	.contain2 aside h3{
		text-indent: 1em;
		margin-top: .3rem;
		font-weight: bold;
		font-size: .35rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.contain2 aside p{
		margin-top: .6rem;
		margin-left: 5%;
		font-size: .3rem;
	}
	.contain2 aside p span{
		position: absolute;
		top: 3.3rem;
		left: 3.2rem;
		height: .5rem;
		color: white;
		border-radius: .5rem;
		line-height: .5rem;
		text-align: center;
		width: 1.5rem;
		background-image: linear-gradient(to right,#ff6e48,#fe4b4a);
	}
	.bottom{
		text-align: center;
	}
	.bottom h3{
		color: #808080;
		width: 100%;
		height: 2rem;
		font-size: .4rem;
		line-height: 4rem;
	}
</style>
